<template>
  <div>
    <p class="title">推荐歌单</p>
    <div>
      <van-row gutter="9">
        <van-col span="8" v-for="item in recommendList" :key="item.id">
          <van-image
            width="100%"
            height="3rem"
            fit="cover"
            :src="item.picUrl"
          />
          <span class="musicInfo">{{item.name}}</span>
        </van-col>
      </van-row>
    </div>
    <p class="title">最新音乐</p>
    <MusicLIst></MusicLIst>
  </div>
</template>

<script>
// 导入外部封装好的api请求
import { recommendApi } from '@/api/index.js'
import MusicLIst from '@/views/Home/MusicLIst.vue'
export default {
  name: 'Home-index',
  components: { MusicLIst },
  data () {
    return {
      recommendList: []
    }
  },
  methods: {
    // 获取最新推荐
    async getCommend () {
      const { data } = await recommendApi(6)
      this.recommendList = data.result
    }
  },
  mounted () {
    // 获取最新推荐
    this.getCommend()
  }
}
</script>

<style scoped lang="less">
.title{
  padding: .2667rem .24rem;
  margin: 0 0 .24rem 0;
  background: #eee;
  color: #333;
  font-size: 15px;
}
.musicInfo{
    overflow: hidden;
    padding: 0 .08rem;
    margin-bottom: .266667rem;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 显示的行数
    -webkit-box-orient: vertical;
    min-height: .8rem;
    line-height: 1.2;
    font-size: .346667rem;
}
</style>>
